//该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'
import Vue from 'vue'
//引入被管理的组件
import About from "@/page/About.vue";
import Home from "@/page/Home.vue";
import Message from '@/page/message.vue'
import News from '@/page/news.vue'
import Detail from "@/page/Detail.vue";

Vue.use(VueRouter);
//创建路由器
const router = new VueRouter({
    //路由工作模式
    mode: 'history',
    //写出每组路由的key-value
    routes: [
        {
            name: 'guanyu',//路由命名
            path: '/about',
            component: About,
            meta: {'title': '关于'},//设置isAuth为开启路由守备
            beforeEnter: (to, from, next) => {//独享路由守备,用beforeEnter,只对该组件有限制,跳转路由之前
                if (localStorage.getItem('school') === 'hs') {
                    next()
                    alert('学校名正确')
                } else {
                    alert('学校名错误')
                }
            }
        },//如果路径是about,那么组件就是About
        {
            path: "/home", component: Home, meta: {'title': '主页'},
            children: [
                {
                    path: 'news',
                    component: News,
                    // 第一种对象写法
                    props: {a: 1, b: '2'},
                    //路由源信息,可以为该路由配置独有的一些信息,比如标题,定义一个变量为是否开启守备等等
                    meta: {'isAuth': true, title: '新闻'},//设置isAuth为开启路由守备

                    children: [{
                        name: 'xiangqing',//路由命名可以简化编码 例如:/home/message/detail 可以写成xiangqing
                        path: 'detail/:id/:title', //使用params接受参数必须使用params格式的路径
                        component: Detail,
                        meta: {'title': '详情'},
                        // 第二种布尔值写法:会将接受到的params值传给props
                        // props: true,

                        //第三种方式:props的值为函数
                        props($route) {
                            return {
                                id: $route.params.id,
                                title: $route.params.title
                            }
                        }

                    }]
                },
                {
                    path: 'message',
                    component: Message,
                    meta: {'isAuth': true, 'title': '消息'}

                },
            ]
        },//如果路径是home,那么组件就是Home
        {
            path: '/home/message',
            component: Message
        },
    ]
})
//定义全局前置路由守卫
//beforeEach:初始化/每次在路由切换之前执行
router.beforeEach((to, from, next) => {
    console.log('@', to, from)
    // if (to.path === '/home/news' || to.name === 'guanyu') {
    if (to.meta.isAuth) {
        if (localStorage.getItem('school') === '1hs') {
            next()//放行
        } else {
            alert('学校名不对,无权查看')
        }
    } else {
        next()
    }
})
//定义全局后置路由守卫,切换完之后在执行,后置路由守备中没有next,    to和from和前置路由守卫是一样的
router.afterEach((to) => {
    //修改文档标题
    document.title = to.meta.title
})
//导出路由器
export default router